<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <ul class="breadcrumb">
        <li>
          <a href="#">Home</a> <span class="divider">/</span>
        </li>
        <li>
          <a href="#">Library</a> <span class="divider">/</span>
        </li>
        <li class="active">
          Data
        </li>
      </ul>
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Profile</a>
        </li>
        <li class="disabled">
          <a href="#">Messages</a>
        </li>
        <li class="dropdown pull-right">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown<strong class="caret"></strong></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li class="divider">
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="page-header">
        <h1>
          LayoutIt! <small>Interface Builder for Bootstrap</small>
        </h1>
      </div>
      <table class="table table-hover">
        <thead>
        <tr>
          <th>
            #
          </th>
          <th>
            Product
          </th>
          <th>
            Payment Taken
          </th>
          <th>
            Status
          </th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>
            1
          </td>
          <td>
            TB - Monthly
          </td>
          <td>
            01/04/2012
          </td>
          <td>
            Default
          </td>
        </tr>
        <tr class="active">
          <td>
            1
          </td>
          <td>
            TB - Monthly
          </td>
          <td>
            01/04/2012
          </td>
          <td>
            Approved
          </td>
        </tr>
        <tr class="success">
          <td>
            2
          </td>
          <td>
            TB - Monthly
          </td>
          <td>
            02/04/2012
          </td>
          <td>
            Declined
          </td>
        </tr>
        <tr class="warning">
          <td>
            3
          </td>
          <td>
            TB - Monthly
          </td>
          <td>
            03/04/2012
          </td>
          <td>
            Pending
          </td>
        </tr>
        <tr class="danger">
          <td>
            4
          </td>
          <td>
            TB - Monthly
          </td>
          <td>
            04/04/2012
          </td>
          <td>
            Call in to confirm
          </td>
        </tr>
        </tbody>
      </table>
      <ul class="pagination pagination-sm">
        <li>
          <a href="#">Prev</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
        <li>
          <a href="#">4</a>
        </li>
        <li>
          <a href="#">5</a>
        </li>
        <li>
          <a href="#">Next</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <form role="form">
        <div class="form-group">
          
          <label for="exampleInputEmail1">
            Email address
          </label>
          <input type="email" class="form-control" id="exampleInputEmail1" />
        </div>
        <div class="form-group">
          
          <label for="exampleInputPassword1">
            Password
          </label>
          <input type="password" class="form-control" id="exampleInputPassword1" />
        </div>
        <div class="form-group">
          
          <label for="exampleInputFile">
            File input
          </label>
          <input type="file" id="exampleInputFile" />
          <p class="help-block">
            Example block-level help text here.
          </p>
        </div>
        <div class="checkbox">
          
          <label>
            <input type="checkbox" /> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">
          Submit
        </button>
      </form>
    </div>
    <div class="col-md-4">
      <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
      <dl>
        <dt>
          Description lists
        </dt>
        <dd>
          A description list is perfect for defining terms.
        </dd>
        <dt>
          Euismod
        </dt>
        <dd>
          Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
        </dd>
        <dd>
          Donec id elit non mi porta gravida at eget metus.
        </dd>
        <dt>
          Malesuada porta
        </dt>
        <dd>
          Etiam porta sem malesuada magna mollis euismod.
        </dd>
        <dt>
          Felis euismod semper eget lacinia
        </dt>
        <dd>
          Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
        </dd>
      </dl>
    </div>
  </div>
</div>